/**
 * @ignore
 * xiami-music dialog
 * @author yiminghe@gmail.com
 */
KISSY.add(function (S, require) {
    var Editor = require('editor');
    var FlashDialog = require('../flash/dialog');
    var MenuButton = require('../menubutton');
    var Dom = S.DOM,
        Node = S.Node,
        Utils = Editor.Utils,
        loading = Utils.debugUrl('theme/tao-loading.gif'),
        XIAMI_URL = 'http://www.xiami.com/app/nineteen/search/key/{key}/page/{page}',
        CLS_XIAMI = 'ke_xiami',
        TYPE_XIAMI = 'xiami-music',
        BTIP = '搜 索',
        TIP = '输入歌曲名、专辑名、艺人名';


    function limit(str, l) {
        if (str.length > l) {
            str = str.substring(0, l) + '...';
        }
        return str;
    }

    var MARGIN_DEFAULT = 0,
        bodyHTML = '<div style="padding:40px 0 70px 0;">' +
            '<form action="#" class="{prefixCls}editor-xiami-form" style="margin:0 20px;">' +
            '<p class="{prefixCls}editor-xiami-title">' +
            '' +
            '</p>' +
            '<p class="{prefixCls}editor-xiami-url-wrap">' +
            '<input class="{prefixCls}editor-xiami-url {prefixCls}editor-input" ' +
            'style="width:370px;' + '"' +
            '/> &nbsp; ' +
            ' <a ' +
            'class="{prefixCls}editor-xiami-submit {prefixCls}editor-button ks-inline-block"' +
            '>' + BTIP + '</a>' +
            '</p>' +
            '<p ' +
            'style="margin:10px 0">' +
            '<label>对 齐： ' +
            '<select ' +
            'class="{prefixCls}editor-xiami-align" title="对齐">' +
            '<option value="none">无</option>' +
            '<option value="left">左对齐</option>' +
            '<option value="right">右对齐</option>' +
            '</select>' +
            '</label>' +
            '<label style="margin-left:70px;">间距： ' +
            ' ' +
            '<input ' +
            '' +
            ' data-verify="^\\d+$" ' +
            ' data-warning="间距请输入非负整数" ' +
            'class="{prefixCls}editor-xiami-margin {prefixCls}editor-input" style="width:60px;' +
            '" value="' + MARGIN_DEFAULT + '"/> 像素' +
            '</label>' +
            '</p>' +
            '</form>' +
            '<div ' +
            'class="{prefixCls}editor-xiami-list">' +
            '</div>' +
            '</div>',
        footHTML = '<div style="padding:5px 20px 20px;"><a ' +
            'class="{prefixCls}editor-xiami-ok {prefixCls}editor-button ks-inline-block" ' +
            'style="margin-right:20px;">确&nbsp;定</a>' +
            '<a class="{prefixCls}editor-xiami-cancel {prefixCls}editor-button ks-inline-block">取&nbsp;消</a></div>';

    function XiamiMusicDialog() {
        XiamiMusicDialog.superclass.constructor.apply(this, arguments);
    }

    S.extend(XiamiMusicDialog, FlashDialog, {
        _config: function () {
            var self = this,
                editor = self.editor,
                prefixCls = editor.get('prefixCls');
            self._cls = CLS_XIAMI;
            self._type = TYPE_XIAMI;
            self._title = '虾米音乐';//属性';
            self._bodyHTML = S.substitute(bodyHTML, {
                prefixCls: prefixCls
            });
            self._footHTML = S.substitute(footHTML, {
                prefixCls: prefixCls
            });
        },
        _initD: function () {
            var self = this,
                editor = self.editor,
                prefixCls = editor.get('prefixCls'),
                d = self.dialog,
                del = d.get('el'),
                dfoot = d.get('footer'),
                input = del.one('.' + prefixCls + 'editor-xiami-url');
            self.dAlign = MenuButton.Select.decorate(del.one('.' + prefixCls + 'editor-xiami-align'), {
                prefixCls: 'ks-editor-big-',
                width: 80,
                menuCfg: {
                    prefixCls: 'ks-editor-',
                    render: del
                }
            });
            self.addRes(self.dAlign);
            self._xiamiInput = input;
            Editor.Utils.placeholder(input, TIP);
            self.addRes(input);
            self._xiamiaList = del.one('.' + prefixCls + 'editor-xiami-list');
            self._xiamiSubmit = del.one('.' + prefixCls + 'editor-xiami-submit');
            self._xiamiSubmit.on('click', function (ev) {
                if (!self._xiamiSubmit.hasClass('ks-editor-button-disabled', undefined)) {
                    loadRecordsByPage(1);
                }
                ev.halt();
            });
            self.addRes(self._xiamiSubmit);
            input.on('keydown', function (ev) {
                if (ev.keyCode === 13) {
                    loadRecordsByPage(1);
                }
            });
            self.dMargin = del.one('.' + prefixCls + 'editor-xiami-margin');
            self._xiamiUrlWrap = del.one('.' + prefixCls + 'editor-xiami-url-wrap');
            self._xiamiTitle = del.one('.' + prefixCls + 'editor-xiami-title');

            var xiamiOk = dfoot.one('.' + prefixCls + 'editor-xiami-ok');
            dfoot.one('.' + prefixCls + 'editor-xiami-cancel').on('click', function (ev) {
                d.hide();
                ev.halt();
            });
            self.addRes(dfoot);
            xiamiOk.on('click', function (ev) {
                var f = self.selectedFlash,
                    r = editor.restoreRealElement(f);
                self._dinfo = {
                    url: self._getFlashUrl(r),
                    attrs: {
                        title: f.attr('title'),
                        //align:self.dAlign.val(),
                        style: 'margin:' +
                            (parseInt(self.dMargin.val(),10) || 0) + 'px;' +
                            'float:' + self.dAlign.get('value') + ';'
                    }
                };
                self._gen();
                ev.halt();
            }, self);
            self.addRes(xiamiOk);

            function loadRecordsByPage(page) {
                var query = input.val();
                if (query.replace(/[^\x00-\xff]/g, '@@').length > 30) {
                    window.alert('长度上限30个字符（1个汉字=2个字符）');
                    return;
                } else if (!S.trim(query) || query === TIP) {
                    window.alert('不能为空！');
                    return;
                }
                self._xiamiSubmit.addClass(prefixCls + 'editor-button-disabled', undefined);
                var req = S.substitute(XIAMI_URL, {
                    key: encodeURIComponent(input.val()),
                    page: page
                });
                self._xiamiaList.html('<img style="' +
                    'display:block;' +
                    'width:32px;' +
                    'height:32px;' +
                    'margin:5px auto 0 auto;' +
                    '" src="' + loading + '"/>' +
                    '<p style="width: 130px; margin: 15px auto 0; color: rgb(150, 150, 150);">正在搜索，请稍候......</p>');
                self._xiamiaList.show();

                S.use('io', function (S, IO) {
                    IO({
                        cache: false,
                        url: req,
                        dataType: 'jsonp',
                        success: function (data) {
                            data.page = page;
                            self._listSearch(data);
                        },
                        error: function () {
                            self._xiamiSubmit.removeClass(prefixCls + 'editor-button-disabled', undefined);
                            var html = '<p style="text-align:center;margin:10px 0;">' +
                                '不好意思，超时了，请重试！' +
                                '</p>';
                            self._xiamiaList.html(html);
                        }
                    });
                });
            }

            self._xiamiaList.on('click', function (ev) {
                ev.preventDefault();
                var t = new Node(ev.target),
                    add = t.closest(function (node) {
                        return self._xiamiaList.contains(node) &&
                            Dom.hasClass(node, prefixCls + 'editor-xiami-add');
                    }, undefined),
                    paging = t.closest(function (node) {
                        return self._xiamiaList.contains(node) &&
                            Dom.hasClass(node, prefixCls + 'editor-xiami-page-item');
                    }, undefined);
                if (add) {
                    self._dinfo = {
                        url: ('http://www.xiami.com/widget/' +
                            add.attr('data-value') + '/singlePlayer.swf'),
                        attrs: {
                            title: add.attr('title'),
                            //align:self.dAlign.val(),
                            style: 'margin:' +
                                (parseInt(self.dMargin.val(),10) || 0) + 'px;' +
                                'float:' + self.dAlign.get('value') + ';'
                        }
                    };
                    self._gen();
                } else if (paging) {
                    loadRecordsByPage(parseInt(paging.attr('data-value'),10));
                }
                ev.halt();
            });
            self.addRes(self._xiamiaList);
        },
        _listSearch: function (data) {
            var self = this,
                i,
                editor = self.editor,
                prefixCls = editor.get('prefixCls'),
                re = data.results,
                html = '';
            // xiami 返回结果自动trim了
            if (data.key === S.trim(self._xiamiInput.val())) {
                self._xiamiSubmit.removeClass(prefixCls + 'editor-button-disabled', undefined);
                if (re && re.length) {
                    html = '<ul>';
                    for (i = 0; i < re.length; i++) {
                        var r = re[i], d = getDisplayName(r);
                        html += '<li ' +
                            'title="' + d + '">' +
                            '<span class="' + prefixCls + 'editor-xiami-song">' + limit(d, 35) +
                            '</span>' +
                            '' +
                            '' +
                            //album_id_song_id
                            '<a href="#" ' +
                            'title="' + d + '" ' +
                            'class="' + prefixCls + 'editor-xiami-add" data-value="' +
                            (
                                /*jshint camelcase:false*/
                                r.album_id + '_' + r.song_id
                                ) + '">添加</a>' + '</li>';
                    }
                    html += '</ul>';

                    var page = data.page,
                        totalPage = Math.floor(data.total / 8),
                        start = page - 1,
                        end = page + 1;

                    if (totalPage > 1) {
                        html += '<p class="' + prefixCls + 'editor-xiami-paging">';
                        if (start <= 2) {
                            end = Math.min(2 - start + end, totalPage - 1);
                            start = 2;
                        }
                        end = Math.min(end, totalPage - 1);
                        if (end === totalPage - 1) {
                            start = Math.max(2, end - 3);
                        }
                        if (page !== 1) {
                            html += getXiamiPaging(page, page - 1, '上一页');
                        }
                        html += getXiamiPaging(page, 1, '1');
                        if (start !== 2) {
                            html += '<span class="' + prefixCls + 'editor-xiami-page-more">...</span>';
                        }
                        for (i = start; i <= end; i++) {
                            html += getXiamiPaging(page, i, undefined);
                        }
                        if (end !== totalPage) {
                            if (end !== totalPage - 1) {
                                html += '<span class="' + prefixCls + 'editor-xiami-page-more">...</span>';
                            }
                            html += getXiamiPaging(page, totalPage, totalPage);
                        }
                        if (page !== totalPage) {
                            html += getXiamiPaging(page, page + 1, '下一页');
                        }
                        html += '</p>';
                    }

                } else {
                    html = '<p style="text-align:center;margin:10px 0;">' +
                        '不好意思，没有找到结果！' +
                        '</p>';
                }
                self._xiamiaList.html(S.substitute(html, {
                    prefixCls: prefixCls
                }));
            }
        },

        _updateD: function () {
            var self = this,
                editor = self.editor,
                prefixCls = editor.get('prefixCls'),
                f = self.selectedFlash;
            if (f) {
                self._xiamiInput.val(f.attr('title'));
                self._xiamiTitle.html(f.attr('title'));
                self.dAlign.set('value', f.css('float'));
                self.dMargin.val(parseInt(f.style('margin'),10) || 0);
                self._xiamiUrlWrap.hide();
                self.dialog.get('footer').show();
                self._xiamiTitle.show();
            } else {
                Editor.Utils.resetInput(self._xiamiInput);
                self.dAlign.set('value', 'none');
                self.dMargin.val(MARGIN_DEFAULT);
                self._xiamiUrlWrap.show();
                self.dialog.get('footer').hide();
                self._xiamiTitle.hide();
                self._xiamiSubmit.removeClass(prefixCls + 'editor-button-disabled', undefined);
            }
            self._xiamiaList.hide();
            self._xiamiaList.html('');
        },

        _getDInfo: function () {
            var self = this;
            S.mix(self._dinfo.attrs, {
                width: 257,
                height: 33
            });
            return self._dinfo;
        }

    });

    function getXiamiPaging(page, i, s) {
        return '<a class="{prefixCls}editor-xiami-page-item {prefixCls}editor-button ks-inline-block' +
            ((page === i) ? ' {prefixCls}editor-xiami-curpage' : '') +
            '" data-value="' + i + '" href="#">' + (s || i) + '</a>';
    }

    function getDisplayName(r) {
        /*jshint camelcase:false*/
        return S.urlDecode(r.song_name) + ' - ' + S.urlDecode(r.artist_name);
    }

    return XiamiMusicDialog;
});